<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 省  -->
    <select name="province"></select>
    <!-- 市 -->
    <select name="city"></select>
    <!-- 区 -->
    <select name="area"></select>
    <script src="../lib/axios.js"></script>
    <script>
      // 基地址
      axios.defaults.baseURL = "http://ajax-api.itheima.net";

      /* 
     拿三个原生的select标签，实现 功能即可 
     1 一打开页面  省数据已经渲染好了，市 和 区不用处理 
     2 给 省 select 绑定 change 事件 省切换的时候，对应 市 和 区 改变
      1 绑定 change 事件 
      2 获取选中的值，传递给 获取市函数 。。。。 
     3 给 市 select 绑定 change 事件 市切换的时候，对应 区改变
     */

      //  获取dom元素
      const province = document.querySelector("[name=province]");
      const city = document.querySelector("[name=city]");
      const area = document.querySelector("[name=area]");

      //  获取省
      async function getProvice() {
        const result = await axios({ url: "/api/province" });
        console.log(result);
        const options = result.data.data.reduce(
          (beforeHTML, item) =>
            beforeHTML + `<option value="${item}">${item}</option>`,
          ""
        );
        province.innerHTML = options;
      }

      //  获取市
      async function getCity(pname) {
        // axios get  请求参数 params
        // axios post 请求参数 data
        const result = await axios({ url: "/api/city", params: { pname } });
        const options = result.data.data.reduce(
          (beforeHTML, item) =>
            beforeHTML + `<option value="${item}">${item}</option>`,
          ""
        );
        city.innerHTML = options;
      }

      //  获取区
      async function getArea(pname, cname) {
        // axios get  请求参数 params
        // axios post 请求参数 data
        const result = await axios({
          url: "/api/area",
          params: { pname, cname },
        });
        const options = result.data.data.reduce(
          (beforeHTML, item) =>
            beforeHTML + `<option value="${item}">${item}</option>`,
          ""
        );
        area.innerHTML = options;
      }

      async function init() {
        await getProvice(); // 获取省 // 异步！！！
        // 根据省来获取市
        await getCity(province.value); // 异步
        // 根据省-市 获取区
        getArea(province.value, city.value);
      }
      init();

      // 省 绑定事件
      province.addEventListener("change", async function (e) {
        await getCity(province.value); // 异步
        await getArea(province.value, city.value);
      });
      // 市 绑定事件
      city.addEventListener("change", async function (e) {
        await getArea(province.value, city.value); // 异步
      });
    </script>
  </body>
</html>
